<template>
    <div class="mv-show">
        <pop-mv
            :mvList = 'popMv_mvList'
            :isLoading = 'popMv_isLoading'
            :loadingPre = 'popMv_loadingPre'>
            <template v-slot:title>
                最受好评电影
            </template>
        </pop-mv>
        <div class="blank-gray"></div>
        <hot-showing
            :hotMvList = 'hotMvList'
            :isLoading = 'hotShow_isLoading'
            :hotIdList = 'hotIdList'
            :add_mv_item = 'add_mv_item'
            :fristInit = 'fristInit'
        ></hot-showing>
    </div>
</template>

<script>
import popMv from './mvShowCom/popMv.vue'
import hotShowing from './mvShowCom/hotShowing.vue'
export default {
    name: 'mvShowing',
    components: {
        popMv,
        hotShowing
    },
    data() {
        return {
            popMv_mvList : [],
            popMv_isLoading : true,
            popMv_loadingPre : 0,
            hotMvList : [],////////////////////////////
            hotShow_isLoading: true,////////////////////////////
            hotIdList : [],////////////////////////////
        }
    },
    mounted() {
        this.popMvInit();
    },
    methods: {
        // 加载最受欢迎的电影信息
        popMvInit(){
            var _this = this;
            this.axios
            .get("https://apis.netstart.cn/maoyan/index/topRatedMovies")
            .then(function (response) {
                var movieList = response.movieList
                var okNum = 0;
                _this.popMv_loadingPre += 40;
                movieList.forEach((item,index)=>{
                    if(index >=6){
                        _this.axios
                            .get("https://apis.netstart.cn/maoyan/movie/intro?movieid="+item.movieId)
                            .then(function(response) {
                                // console.log('电影的',response.data.movie.wish);
                                item.wish = response.data.movie.wish;
                                okNum ++;
                                _this.popMv_loadingPre += 10;
                                if(okNum == 6){
                                    _this.popMv_mvList = movieList;
                                    // console.log(_this.popMv_mvList);
                                    _this.popMv_isLoading = false;
                                }
                            })
                            .catch((err)=>{
                                console.log(err);
                            })
                    }
                    
                })
            })
            .catch(function (error) {
                console.log(error);
            });
        },
        // 添加热门电影的数量,参数是电影的id   ////////////////////////
        add_mv_item(url) {
            this.hotShow_isLoading = true;
            this.axios.get('https://apis.netstart.cn/maoyan/index/moreComingList?movieIds='+url)
            .then((success)=>{
                // console.log(success);
                var newItem = success.coming;
                newItem.forEach( item => {
                    item.img = item.img.replace(/w.h/,"170.230");
                });
                this.hotMvList = this.hotMvList.concat(newItem);
                this.hotShow_isLoading = false;
            })
            .catch((err)=> {
                console.log(err);
            })
        },
        // 热门电影第一次加载
        fristInit() {
            this.axios.get('https://apis.netstart.cn/maoyan/index/movieOnInfoList')
            .then((success)=>{
                // console.log(success);
                this.hotIdList = success.movieIds;
                // console.log("id-num:",this.hotIdList.length);
                var newItem = success.movieList;
                newItem.forEach( item => {
                    // console.log(typeof item.img);
                    // console.log('item.img1',item.img);
                    item.img = item.img.replace(/w.h/,"170.230");
                    // console.log('item.img2',item.img);
                });
                // console.log('newItem',newItem);
                this.hotMvList = this.hotMvList.concat(newItem);
                // console.log(this.hotMvList);
                this.hotShow_isLoading = false;
            })
            .catch((err)=> {
                console.log(err);
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.mv-show {
    font-size: 24px;
}
.blank-gray {
    height: 20px;
    background: #F5F5F5;
}
</style>